<!--确认订单-->
<template>
    <div class="page_comfirmOrder pageNormalBackground">
        <headerT title="确认订单"/>
        <div style="height:calc(100vh - 3.1rem);overflow-y: auto;margin-top: 1.2rem;">
            <div class="getGoodsWay pageSpecialBackground">
                <div class="wayBlock everyBlockBgcolor">
                    <div class="nav" v-if="detailsInfo && detailsInfo.good_offline_mode">
                        <!--@click.stop="chooseNavItem(1)"-->
                        <div class="translateBlock navWidth" :class="detailsInfo.good_offline_mode.offline_modes ===
                             1  ? 'chooseNav1' : ''">
                            到店消费
                        </div>
                        <!--@click.stop="chooseNavItem(2)"-->
                        <div class="translateBlock navWidth"
                             :class="detailsInfo.good_offline_mode.offline_modes === 2  ||
                             detailsInfo.good_offline_mode.offline_modes === 3 ? 'chooseNav1' : ''">
                            邮寄
                        </div>
                    </div>
                    <div v-if="detailsInfo && detailsInfo.good_offline_mode &&
                    detailsInfo.good_offline_mode.offline_modes === 1 ">
                        <div class="itemWay">
                            <img src="../../../static/images/user.png" class="vMiddle icon" alt=""/>
                            <div class="translateBlock "
                                 style="border-bottom: 1px solid #ccc;padding-bottom: .4rem;width: 8rem;">
                                <group class="translateBlock vMiddle">
                                    <x-input title="联系人" name="username" placeholder="请输入联系人"
                                             is-type="china-name" v-model="username"></x-input>
                                </group>
                            </div>
                        </div>
                        <div class="itemWay">
                            <img src="../../../static/images/tel.png" class="vMiddle icon" alt=""/>
                            <div class="translateBlock" style="width: 8rem;">
                                <group class="translateBlock vMiddle">
                                    <x-input title="联系电话" name="mobile" placeholder="请输入联系电话" keyboard="number"
                                             is-type="china-mobile" v-model="phone"></x-input>
                                </group>
                            </div>
                        </div>
                    </div>
                    <div class="sendByPost" v-else>
                        <img src="../../../static/images/wz.png" class="iconPosition vMiddle" alt=""/>
                        <div class="translateBlock contackWay vMiddle" v-if="contactWays">
                            <div class="name">
                                <div class="translateBlock">{{contactWays.username}}</div>
                                <div class="phone translateBlock">{{contactWays.phone}}</div>
                            </div>
                            <div class="address">
                                {{contactWays.province}}{{contactWays.city}}{{contactWays.district}}{{contactWays.address}}
                            </div>
                        </div>
                        <div class="translateBlock contackWay vMiddle" v-else>
                            <div class="name">
                                <div class="phone translateBlock">请选择收货地址</div>
                            </div>
                        </div>
                        <div class="translateBlock vMiddle iconJantou" @click="choosePostWay()">
                            <img src="../../../static/images/jiantou_gray.png" class="iconPosition vMiddle" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goodsInfo everyBlockBgcolor">
                <div class="title">
                    <img src="../../../static/images/store.png" class="iconStore" alt=""/>
                    <span v-if="detailsInfo">{{detailsInfo.goods_name}}</span>
                </div>
                <div class="goodsDetails" v-if="detailsInfo">
                    <img :src="detailsInfo.good_img[0].img_url" class="iconGoods" alt=""/>
                    <div class="translateBlock" style="vertical-align: top;">
                        <div class="moreTextEllipsis goodsName">{{detailsInfo.goods_title}}</div>
                        <div class="package">
                            {{chooseAttributeText}}
                        </div>
                    </div>
                    <div class="translateBlock goodsPrice" style="vertical-align: top;">
                        <div>
                            <span v-if="detailsInfo.good_marketing && detailsInfo.good_marketing.promotion_price">
                                <div class="mainColor" style="font-size: .42rem;">
                                    ¥{{detailsInfo.good_marketing.promotion_price}}
                                </div>
                                <div style="text-decoration: line-through;">
                                    ¥{{detailsInfo.good_specification[0].price}}
                                </div>
                            </span>
                            <span v-else>
                                <span v-if="detailsInfo.good_specification" class="mainColor"
                                      style="font-size: .42rem;">
                                    ¥{{detailsInfo.good_specification[0].price}}
                                </span>
                            </span>
                        </div>
                        <div>x{{number}}</div>
                    </div>
                    <div class="goodsNumber">
                        <group>
                            <x-number title="购买数量" v-model="number" :min="1" @on-change="changeValue"
                                      fillable>
                            </x-number>
                        </group>
                        <div class="mainColor" style="margin-top: .5rem;" v-if="detailsInfo.good_marketing &&
                        detailsInfo.good_marketing.sustained_use">
                            折扣商品限购买的数量为{{detailsInfo.good_marketing.sustained_use}}，超过部分按原价收取
                        </div>
                        <group>
                            <x-input title="留言备注" placeholder="输入你想说的（50字以内）" v-model="message" :min="0"
                                     :max="50"></x-input>
                        </group>
                    </div>
                </div>
            </div>
            <div class="goodsNotice" v-if="detailsInfo && detailsInfo.good_marketing">
                <div class="mainColor" v-if="detailsInfo.good_marketing.pattern === 3">
                    <img class="vMiddle" src="../../../static/images/icon-notice.png" alt=""/>
                    <div class="translateBlock ">限时抢购商品，购买后不设退款!</div>
                </div>
            </div>
        </div>
        <div class="btnGroups everyBlockBgcolor">
            <div class="translateBlock itemMoney">
                <span class="number">共{{totalNumber}}件</span>
                <span class="text">合计：</span>
                <span class="mainColor">
                    ¥{{totalMoney}}
                </span>
            </div>
            <div class="translateBlock itemBtn">
                <div class=" btn btnBuy" @click="buyGoods()">立即购买</div>
            </div>
        </div>

        <div v-transfer-dom>
            <popup v-model="isChooseWay" position="bottom" max-height="50%" class="choosePostWay">
                <div class="popupTitle">
                    <div class="btnCancel translateBlock" @click="isChooseWay = false">取消</div>
                    <div class="title translateBlock">选择邮寄地址</div>
                    <div class="btnCancel translateBlock" @click="chooseItemWay()">确认</div>
                </div>
                <div v-if="addressList.length">
                    <div v-for="(item,index) in addressList" class="itemADDress vMiddle">
                        <div class="translateBlock inputBlock">
                            <input :id="'item' + index" type="radio" class="chooseAddressRadio" name="chooseAddress"
                                   :value="item.id"/>
                            <label :for="'item' + index"></label>
                        </div>
                        <div class="translateBlock blockInfo vMiddle">
                            <div class="name">
                                <span class="username">{{item.username}}</span>
                                <span>{{item.phone}}</span>
                            </div>
                            <div class="address">
                                {{item.province}}{{item.city}}{{item.district}}{{item.address}}
                            </div>
                        </div>
                        <div class="translateBlock edit vMiddle"
                             @click="$tools.goPage_query('edditAddress',{goods_id:goods_id,number:number,addressId:item.id})">
                            <img src="../../../static/images/icon-edit1.png" class="iconEdit vMiddle" alt=""/>
                        </div>
                    </div>
                </div>
                <div v-else class="noData"></div>
                <div class="popupBottom"
                     @click="$tools.goPage_query('edditAddress',{goods_id:goods_id,number:number,addressId:''})">
                    新增
                </div>
            </popup>
        </div>


    </div>
</template>

<script>
    import {XInput, Group, XNumber, Popup, TransferDom} from 'vux'
    import {goodsDetails, goodBuyNow} from '../../services/goods'
    import {userDeliveryAddressList} from '../../services/personCenter'

    export default {
        name: "comfirmOrder",
        directives: {
            TransferDom
        },
        components: {
            XInput,
            Group,
            XNumber,
            Popup
        },
        data() {
            return {
                number: 1,  // 购买商品数量
                totalNumber: 1,   // 商品总数量
                totalMoney: 0,    // 商品总价
                isChooseWay: false,    // 是否弹出选择邮寄地址的popup
                goods_id: this.$route.query.goods_id,
                isOpenAddressDialog: this.$route.query.isOpenAddressDialog,
                specificationId: this.$route.query.specificationId,
                chooseAttributeText: this.$route.query.chooseAttributeText,
                longitude: this.$tools.getStorageParam('localStorage', 'longitude'),     // 经度
                dimensionality: this.$tools.getStorageParam('localStorage', 'dimensionality'),  // 纬度
                detailsInfo: null,
                username: '',    // 核销联系人
                phone: '',      // 核销联系方式
                message: '',      // 留言备注
                defaultPost: 1,     // 1：默认收货地址， 2：非默认
                contactWays: null,
                addressList: [],        // 用户所有收货地址
            }
        },

        created() {

        },
        watch: {},
        mounted() {
            this.getDetails();
            if (this.isOpenAddressDialog === '2') {
                this.choosePostWay();
            }
        },
        methods: {
            // 获取商品详情
            getDetails() {
                let param = {
                    goods_id: this.goods_id,
                    longitude: this.longitude,
                    dimensionality: this.dimensionality,
                }
                this.$post(goodsDetails, param).then(res => {
                    this.detailsInfo = res.data;
                    if (this.detailsInfo.good_offline_mode && this.detailsInfo.good_offline_mode.offline_modes === 2) {
                        this.getUserDeliveryAddressList()
                    }
                    this.changeValue(1);
                })
            },

            // 选择方式
            chooseNavItem(number) {
                this.detailsInfo.good_offline_mode.offline_modes = number;
                if (number === 2) {
                    this.getUserDeliveryAddressList()
                }
            },

            // 获取用户收货地址
            getUserDeliveryAddressList() {
                this.addressList = [];
                let param = {
                    default: this.defaultPost,
                    type: this.defaultPost,
                }
                this.$post(userDeliveryAddressList, param).then(res => {

                    if (this.defaultPost === 1) {
                        this.contactWays = res.data;
                    } else {
                        this.addressList = res.data.data;
                    }

                })
            },

            // 打开用户收货地址popup，并获取所有收货地址
            choosePostWay() {
                this.isChooseWay = true;
                this.defaultPost = 2;
                this.getUserDeliveryAddressList();
            },

            // 选择收货地址
            chooseItemWay() {
                let items = document.getElementsByClassName('chooseAddressRadio')
                for (let i = 0; i < this.addressList.length; i++) {
                    if (items[i].checked) {
                        this.contactWays = this.addressList[i];
                        this.isChooseWay = false;
                        break;
                    }
                }

            },

            // 改变购买数量
            changeValue(ref) {
                if (this.detailsInfo.good_marketing && this.detailsInfo.good_marketing.promotion_price) {
                    let _item = this.detailsInfo.good_marketing;
                    if (ref < _item.sustained_use + 1) {
                        this.totalMoney = this.$tools.accMul(ref, _item.promotion_price)
                    } else {
                        let _total = this.$tools.accMul(_item.sustained_use, _item.promotion_price);
                        let total = this.$tools.accMul(ref - _item.sustained_use,
                            this.detailsInfo.good_specification[0].price)
                        this.totalMoney = this.$tools.floatSub(_total, total, '+')
                    }

                } else {
                    this.totalMoney = this.$tools.accMul(ref, this.detailsInfo.good_specification[0].price)
                }

            },

            // 立即购买商品
            buyGoods() {
                debugger
                let param = {
                    good_id: this.goods_id,
                    number: this.number,
                    price: this.detailsInfo.good_marketing.promotion_price,
                    order_state: this.detailsInfo.good_offline_mode.offline_modes,
                    specificationId: this.specificationId,
                }
                if (this.detailsInfo.good_offline_mode.offline_modes === 1) {

                    if (!this.username) {

                    }

                    Object.assign(param, {
                        username: this.username,
                        phone: this.phone,
                    })
                } else {
                    Object.assign(param, {
                        addresses_id: this.contactWays.id,
                    })

                }
                this.$post(goodBuyNow, param).then(res => {
                    if (res.code === 200) {
                        this.$tools.goPage_query('orderDetails', {
                            orderId: res.data.id,
                        })
                    }
                })

            },

        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_comfirmOrder {
        color: #4E4E4E;
        font-size: .34rem;

        .getGoodsWay {
            position: relative;
            height: 7.18rem;

            .wayBlock {
                position: absolute;
                width: 9.4rem;
                margin: 0.62rem 0.22rem 0.22rem 0.26rem;

                .nav {
                    height: 1.5rem;
                    line-height: 1.5rem;
                }

                .navWidth {
                    width: 49%;
                    text-align: center;
                }

                .chooseNav1 {
                    background-color: #FCF4F4;
                }

                .itemWay {
                    .icon {
                        margin: .6rem .4rem;
                    }

                    .weui-cells {
                        margin-top: 0rem !important;
                    }

                    .weui-cells:before {
                        border-top: none !important;
                    }

                    .weui-cells:after {
                        border-bottom: none !important;
                    }

                    .weui-label, .weui-input {
                        font-size: .34rem !important;
                    }

                    .weui-cell__hd {
                        margin-top: .15rem !important;
                    }
                }

                .sendByPost {
                    padding: 0.8rem 0;
                    font-size: .34rem;
                    color: #4E4E4E;

                    .iconJantou {
                        width: 1.3rem;
                        height: 1.3rem;
                        line-height: 1.3rem;
                        text-align: center;
                    }

                    .iconPosition {
                        padding: 0 .4rem;
                    }

                    .contackWay {
                        width: 6rem;

                        .name {
                            line-height: 1rem;
                        }

                        .address {
                            line-height: .44rem;
                        }
                    }


                }
            }

        }

        .goodsInfo {
            height: auto;
            margin: 0rem 0.22rem 0.22rem 0.26rem;
            padding: 0 .44rem;
            z-index: 1001;

            .title {
                line-height: 1.35rem;

                .iconStore {
                    width: .39rem;
                    vertical-align: text-top;
                    margin-right: .15rem;
                }
            }

            .goodsDetails {
                .iconGoods {
                    width: 2rem;
                    height: 1.9rem;
                }

                .goodsName {
                    width: 4.5rem;
                    -webkit-line-clamp: 2;
                }

                .package {
                    width: fit-content;
                    line-height: .6rem;
                    background-color: #FEF3DB;
                    color: #FF9609;
                    font-size: .25rem;
                    padding: 0 .2rem;
                }

                .goodsPrice {
                    vertical-align: top;
                    width: 1.9rem;
                    text-align: right;;
                }

                .goodsNumber {
                    .weui-cell {
                        height: 1rem;
                        line-height: 1rem;
                        font-size: .34rem !important;
                        padding: 0 !important;
                    }

                    .weui-cells:before {
                        border-top: none !important;
                    }

                    .weui-cells:after {
                        border-bottom: none !important;
                    }

                    .vux-number-selector-sub, .vux-number-selector-plus {
                        width: 1rem !important;
                        height: 1rem !important;
                        line-height: 1rem !important;
                        text-align: center !important;
                        padding: 0 !important;
                    }

                    .vux-number-input {
                        width: 2rem !important;
                        height: 1rem !important;
                        line-height: 1rem !important;
                        padding: 0 !important;
                    }
                }
            }

        }

        .goodsNotice {
            margin: .5rem 1.02rem;
        }

        .btnGroups {
            position: fixed;
            bottom: 0;
            height: 1.8rem;
            line-height: 1.8rem;
            margin: 0 0.2rem 0 0.49rem;

            .itemMoney {
                width: 6.2rem;
            }

            .itemBtn {

                text-align: right;
                text-align: -webkit-right;
            }

            .btnBuy {
                width: 2.8rem;
                vertical-align: middle;
            }

            .number {
                font-size: .25rem;
                color: #9F9F9F;
            }

            .text {
                font-size: .32rem;
            }
        }
    }

    .choosePostWay {
        color: #4e4e4e;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        .popupTitle {
            line-height: 1.5rem;

            .btnCancel {
                width: 1.5rem;
                text-align: center;
                font-size: .32rem;
            }

            .title {
                width: 6.4rem;
                font-size: .39rem;
                text-align: center;
            }
        }

        .inputBlock {
            position: relative;
            width: 1.5rem;
            text-align: center;

            input[type='radio'] {
                width: 20px;
                height: 20px;
                opacity: 0;
            }

            label {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 1px solid #9f9f9f;
            }

            /*设置选中的input的样式*/
            /* + 是兄弟选择器,获取选中后的label元素*/

            input:checked + label {
                background-color: #F64135;
                border: 1px solid #F64135;
            }

            input:checked + label::after {
                position: absolute;
                content: '';
                width: 5px;
                height: 10px;
                top: 3px;
                left: 6px;
                border: 2px solid #fff;
                border-top: none;
                border-left: none;
                transform: rotate(45deg);
            }

        }

        .itemADDress {
            border-top: 1px solid #E2E2E2;
            padding: .1rem 0;
        }

        .blockInfo {
            width: 6.5rem;

            .name {
                line-height: .9rem;
                font-size: .32rem;

                .username {
                    font-weight: 600;
                }
            }

            .address {
                line-height: .5rem;
                font-size: .34rem;
            }
        }

        .edit {
            width: 1.2rem;
            text-align: center;

            .iconEdit {
                width: .3rem;
            }
        }

        .popupBottom {
            line-height: 1.18rem;
            font-size: .39rem;
            border-top: 1px dashed #E2E2E2;
            text-align: center;
        }
    }
</style>
